<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">{{i18n.login}}</block>
		</cu-custom>
		<view class="forget-bg">
			<view class="forget-card">
				<view class="forget-input forget-margin-b">
					<input v-model="phone" maxlength="11" type="number" :placeholder="i18n.phoneHint" />
				</view>
				<view class="forget-input forget-margin-b">
					<view class="verify-left">
						<input v-model="code" type="number" :placeholder="i18n.codeHint" />
					</view>
					<view class="verify-right">
						<button class="verify-btn" :disabled="codeDisabled" @click="getCode" type="primary">{{codeText}}</button>
					</view>
				</view>
			</view>
		</view>
		<view class="forget-btn">
			<button class="landing" @click="submit" type="primary">{{$t('submit')}}</button>
		</view>
	</view>
</template>

<script>
	var _self = null
	export default {
		computed: {
			i18n() {
				return this.$t('login')
			},
		},
		data() {
			return {
				phone: '',
				code: '',
				codeText: '',
				codeDisabled: false,
				tempCode: '', //临时验证码
				tempPhone: '', //临时手机号
			}
		},
		onLoad() {
			_self = this
			this.codeText = this.i18n.actionCode
			// console.log()
		},
		methods: {
			//获取验证码
			getCode() {
				if (_self.checkPhone(_self.phone)) {
					// console.log(_self.phone)
					//保存当前手机号，用于验证码验证
					_self.tempPhone = _self.phone
					//倒计时
					_self.startCountDown()
					//请求获取验证码
					uni.request({
						url: _self.$constant.BASEURL + _self.$constant.GET_PHONE_CODE,
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							phone: _self.phone
						},
						success: (res) => {
							console.log(res.data);
							if (res.data.code == 0) {
								_self.tempCode = res.data.data
							}
						}
					});
				} else {
					uni.showToast({
						title: _self.i18n.codeNoInput,
						icon: "none"
					})
				}
			},
			checkPhone(number) {
				return /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/.test(number)
			},
			//开始倒计时
			startCountDown() {
				//初始化按钮状态,设置成不可点击
				_self.codeDisabled = true
				//正式计时
				var currentTime = 60
				_self.codeText = currentTime + 's'
				var interval = setInterval(function() {
					currentTime--
					_self.codeText = currentTime + 's'
					// console.log(currentTime)
					if (currentTime <= 0) {
						//计时完成后关闭定时器，并重置按钮
						clearInterval(interval)
						_self.codeDisabled = false
						_self.codeText = _self.i18n.actionCode
					}
				}, 1000)
			},
			//绑定员工和公众号
			submit() {
				// console.log("tempCode = " + _self.tempCode)
				// console.log("tempPhone = " + _self.tempPhone)
				// console.log("code = " + _self.code)
				// console.log("phone = " + _self.phone)
				if (!_self.checkPhone(_self.phone)) {
					uni.showToast({
						title: _self.i18n.phoneIncorrect,
						icon: "none"
					})
					return
				}

				if (!_self.code.length > 0) {
					uni.showToast({
						title: _self.i18n.codeNoInput,
						icon: "none"
					})
					return
				}

				if (_self.code != _self.tempCode) {
					uni.showToast({
						title: _self.i18n.codeIncorrect,
						icon: "none"
					})
					return
				}

				if (_self.phone != _self.tempPhone) {
					uni.showToast({
						title: _self.i18n.phoneChange,
						icon: "none"
					})
					return
				}

				_self.bindEmployee()

			},
			bindEmployee() {
				uni.request({
					url: _self.$constant.BASEURL + _self.$constant.BIND_EMPLOYEE,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						phone: _self.phone,
						openid: getApp().globalData.openid
					},
					success: (res) => {
						// console.log(res.data);
						if (res.data.code == 0) {
							_self.checkUserBindding()
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				});
			},
			checkUserBindding() {
				//保存openid到全局
				var openid = getApp().globalData.openid
				uni.request({
					url: _self.$constant.BASEURL + _self.$constant.CHECK_USER_BIND,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						openid: openid
					},
					success: (res) => {
						// console.log(res)
						var result = res.data
						if (result.code == 0) {
							var company = result.data
							let json = JSON.stringify(company)
							uni.redirectTo({
								url: `../selectcompany/selectcompany?company=${json}`
							})
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none'
							})
						}
					},
					fail() {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				});
			}
		}
	}
</script>

<style>
	.verify-left {
		width: calc(100% - 260upx);
	}

	.verify-right {
		padding-left: 20upx;
	}

	.verify-btn {
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		width: 240upx;
		border-radius: 8upx;
		background: linear-gradient(left, #5599ff, #5599ff);
	}

	.verify-left,
	.verify-right {
		float: left;
	}

	.landing {
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left, #5599ff, #5599ff);
	}

	.forget-btn {
		padding: 10upx 20upx;
		margin-top: 280upx;
	}

	.forget-input input {
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}

	.forget-margin-b {
		margin-bottom: 25upx;
	}

	.forget-input {
		padding: 10upx 20upx;
		overflow: auto;
	}

	.forget-card {
		background: #fff;
		border-radius: 12upx;
		padding: 60upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0, 0, 0, 0.12);
		position: relative;
		margin-top: 120upx;
	}

	.forget-bg {
		height: 260upx;
		padding: 25upx;
		background: linear-gradient(#5599ff, #5599ff);
	}
</style>
